import React, { useEffect, useState } from 'react'
import { PageHeader, Descriptions } from 'antd';
import moment from 'moment';
import API from '../../../util/api';

export default function NewsPreview(props) {
    const [newsInfo, setnewsInfo] = useState(null);
    useEffect(() => {
        API.modifyDraft(props.match.params.id,{
            _expand:'category'
        }).then(res => {
            setnewsInfo(res.data);
        });
    }, [props.match.params.id]); // useEffect在每次id发生变化时调用

    const auditList = ["未审核", '审核中', '已通过', '未通过'];
    const publishList = ["未发布", '待发布', '已上线', '已下线'];
    const data =  {
        myhtml: `
        <div class="top-rated">
  <p class="title">最受好评电影</p>
  <div class="top-rated-list">
    <div class="top-rated-item" data-id=1218142 >
        <div class="poster default-img-bg">
          <img src=https://p1.meituan.net/170.230/movie/63696901c00a1aea8fcc62ba873bb6d41014216.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">9.4</span></span>
        </div>
        <h5 class="name line-ellipsis">拆弹专家2</h5>
    </div>
    <div class="top-rated-item" data-id=553231 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/moviemachine/38cdf0810cad207ef0917abe4fa1e3ef5788447.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">9.4</span></span>
        </div>
        <h5 class="name line-ellipsis">心灵奇旅</h5>
    </div>
    <div class="top-rated-item" data-id=1334342 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/movie/df84690ded848edf709187eae23a7969866455.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">9.3</span></span>
        </div>
        <h5 class="name line-ellipsis">送你一朵小红花</h5>
    </div>
    <div class="top-rated-item" data-id=25348 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/movie/52d698b2192ec18fd4ccb892bd9e543597374.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">9.2</span></span>
        </div>
        <h5 class="name line-ellipsis">崖上的波妞</h5>
    </div>
    <div class="top-rated-item" data-id=1244901 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/movie/817f964bd5c112da0ad43eff983f20ff2285275.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">9.1</span></span>
        </div>
        <h5 class="name line-ellipsis">许愿神龙</h5>
    </div>
    <div class="top-rated-item" data-id=1332663 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/movie/6ac27475bf1b4f668a57b17d91d949743056059.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">9</span></span>
        </div>
        <h5 class="name line-ellipsis">海底小纵队：火焰之环</h5>
    </div>
    <div class="top-rated-item" data-id=1300668 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/moviemachine/38af7caf2c5d01098b9e5c24b02d2d781787995.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">8.6</span></span>
        </div>
        <h5 class="name line-ellipsis">温暖的抱抱</h5>
    </div>
    <div class="top-rated-item" data-id=1229843 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/movie/c48ec16fd8c3d9778ae43bfa43e55841164435.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">8.3</span></span>
        </div>
        <h5 class="name line-ellipsis">叱咤风云</h5>
    </div>
    <div class="top-rated-item" data-id=1322799 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/movie/2199e628bb4d6fc49e1ce13fddc15e5d1634782.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="score">观众评分&nbsp;&nbsp;<span class="rated-score">8.1</span></span>
        </div>
        <h5 class="name line-ellipsis">缉魂</h5>
    </div>
    <div class="top-rated-item" data-id=1283276 >
        <div class="poster default-img-bg">
          <img src=https://p0.meituan.net/170.230/movie/770fad3c3a815d4691e2a962dcad6f3c1241657.jpg  onerror="this.style.visibility='hidden'">
          <span class="wish-bg"></span>
            <span class="wish"><span class="wish-num">83693</span>人想看</span>
        </div>
        <h5 class="name line-ellipsis">大红包</h5>
    </div>
  </div>
</div>`
    }
    return (
        <div>
            {
                newsInfo && <div>

                    <PageHeader
                        onBack={() => window.history.back()}
                        title={newsInfo.title}
                    >
                        <Descriptions size="small" column={3}>
                            <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                            <Descriptions.Item label="创建时间">{moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}</Descriptions.Item>
                            <Descriptions.Item label="发布时间">{
                                newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"
                            }</Descriptions.Item>
                            <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                            <Descriptions.Item label="审核状态" ><span style={{ color: "red" }}>{auditList[newsInfo.auditState]}</span></Descriptions.Item>
                            <Descriptions.Item label="发布状态" ><span style={{ color: "red" }}>{publishList[newsInfo.publishState]}</span></Descriptions.Item>
                            <Descriptions.Item label="访问数量">{newsInfo.view}</Descriptions.Item>
                            <Descriptions.Item label="点赞数量">{newsInfo.star}</Descriptions.Item>
                            <Descriptions.Item label="评论数量">0</Descriptions.Item>

                        </Descriptions>
                    </PageHeader>

                    <div dangerouslySetInnerHTML={{
                        __html:newsInfo.content
                        // __html:data.myhtml 
                    }} style={{
                        margin:"0 24px",
                        border:"1px solid gray"
                    }}>
                    </div>
                </div>
            }
        </div>
    )
}
